<template>
	<div class="message-detail">
		<div class="header">
			<div class="title">{{ messageItem.title }}</div>
		</div>
		<div class="main">
			<div>Dear Users:</div>
			<div class="content" v-html="messageItem.description"></div>
		</div>
		<div class="footer">
			<div>DailyBonus</div>
			<div>{{ formatDate(messageItem.showStartTime) }}</div>
		</div>
	</div>
</template>
<script>
import { onMounted, onBeforeMount } from "vue";
import { useMessage } from "./component/useMessage.js";
import { formatDate } from "@@/utils/common.js";
import { useMeInfo } from "../components/useMeInfo.js";
export default {
	props: {
		item: {
			default: JSON.stringify({}),
		},
	},
	setup(props) {
		const { getMessageInfo } = useMeInfo();
		const { messageItem, setReaded } = useMessage();
		onBeforeMount(async () => {
			await getMessageInfo();
			setReaded(messageItem.value);
		});
		onMounted(() => {
			window.trackEvent({
				pageTitle: "h5Page",
				ev: "ShowMessageDetails",
				remarks: `Title=${messageItem.value.title}`,
			});
		});
		return {
			messageItem,
			formatDate,
		};
	},
};
</script>
<style lang="less" scoped>
.message-detail {
	height: 100%;
	background-color: white;
	padding: 0.2rem 0.16rem;
	color: #121314;
	.header {
		padding-bottom: 0.12rem;
		border-bottom: 0.01rem dashed #d9dbe1;
		.title {
			font-size: 0.2rem;
			font-weight: 500;
			line-height: 0.32rem;
			text-align: center;
		}
	}
	.main {
		font-size: 0.16rem;
		font-weight: 500;
		margin-top: 0.2rem;
		& > div {
			line-height: 0.28rem;
		}
		.content {
			margin-top: 0.16rem;
			text-indent: 2em;
			word-wrap: break-word;
			img {
				width: 100% !important;
			}
		}
	}
	.footer {
		font-size: 0.16rem;
		font-weight: 500;
		color: @theme-color;
		margin-top: 0.16rem;
		& > div {
			line-height: 0.28rem;
			text-align: right;
		}
	}
}
</style>